<template>
  <div>
    <el-row>
    <el-col :span="10">
      <el-card class="box-card crad">
        <div style="margin-top: 80px;margin-left: 50px;">
        <h3>积分抵扣比例</h3>
        <h2>1积分={{discount.discountRatio}} 元</h2>
        </div>
        <div>
          <el-row>
            <el-col :span="12" style="margin-top: 90px;margin-left: 5px;">
              <span>{{discount.modifyBy}}</span>
              <span>{{discount.modifyTime}}</span>
            </el-col>
            <el-col :span="6">
              <el-button type="info" class="button bottom" @click="discountWindow">修改比例</el-button>
            </el-col>
          </el-row>
         </div>
      </el-card>
    </el-col>
    <el-col :span="10">
     <el-card class="box-card crad">
       <div style="margin-top: 80px;margin-left: 50px;">
       <h3>积分增加比例</h3>
       <h2>1元={{increase.increaseRatio}}积分</h2>
       <span>(最终积分会自动四舍五入)</span>
       </div>
       <div>
         <el-row>
           <el-col :span="12" style="margin-top: 70px;margin-left: 5px;">
             <span>{{increase.modifyBy}}</span>
             <span>{{increase.modifyTime}}</span>
           </el-col>
           <el-col :span="6">
             <el-button type="info" class="button bottom1" @click="increaseWindow">修改比例</el-button>
           </el-col>
         </el-row>
        </div>
     </el-card>
    </el-col>
</el-row>
<el-dialog
  title="设置积分抵扣规则"
  :visible.sync="dialogVisible1"
  width="25%"
  >
  <template>
    <span>1积分=</span>
    <el-input-number v-model="discountRatio" :precision="2" :min="0.01" size="small"></el-input-number>
    <span>元</span>
  </template>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="insertScoreDiscount">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="设置积分增加规则"
  :visible.sync="dialogVisible2"
  width="25%"
  >
  <template>
    <span>1元=</span>
    <el-input-number v-model="increaseRatio" :precision="2" :min="0.01" size="small"></el-input-number>
    <span>分</span>
  </template>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="insertScoreIncrease">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
  export default{
    name:"AddScoreRuler",
    data(){
      return{
      discount:{},
      increase:{},
      discountRatio:"",
      increaseRatio:"",
      dialogVisible1:false,
      dialogVisible2:false
      }
    },
    methods:{
      increaseWindow(){
      this.dialogVisible2=true
      },
      discountWindow(){
      this.dialogVisible1=true
      },
      insertScoreIncrease(){
        this.$http.get("/admin/scoreIncrease/updateScoreIncrease",{
          params:{
          increaseRatio:this.increaseRatio
          }
        }).then(resp=>{
          this.selectScoreIncrease()
          this.dialogVisible2=false
        })
      },
      insertScoreDiscount(){
        this.$http.get("/admin/scoreDiscount/updateScoreDiscount",{
          params:{
          discountRatio:this.discountRatio
          }
        }).then(resp=>{
          this.selectScoreDiscount()
          this.dialogVisible1=false
        })
      },
      selectScoreDiscount(){
      this.$http.get("/admin/scoreDiscount/selectScoreDiscount").then(resp=>{
        this.discount=resp.data.data
        this.discountRatio=this.discount.discountRatio
      })
      },
      selectScoreIncrease(){
      this.$http.get("/admin/scoreIncrease/selectScoreIncrease").then(resp=>{
        this.increase=resp.data.data
        this.increaseRatio=this.increase.increaseRatio
      })
      }
    },
    created(){
      this.selectScoreDiscount()
      this.selectScoreIncrease()
    }
  }
</script>

<style>
  .crad{
    width: 350px;
    height: 300px;
    background-color:gray;
    margin-top: 50px;
    margin-left: 100px;
  }
  .bottom {
      margin-top: 90px;
      margin-left: 70px;
      line-height: 12px;
    }
.bottom1{
  margin-top: 70px;
  margin-left: 70px;
  line-height: 12px;
}
</style>
